<style scoped>
/*主管医生*/

.w290 {
    width: 290px
}

.w650 {
    width: 650px
}
.form-group{
   /* text-align: center;*/
    margin-bottom: 0;
}
.form-control{
    display: inline-block;
    width: 84%;
}
.vertical-top{
    vertical-align: top;
}

.index_con>div {
    height: 250px;
    -webkit-box-shadow: 0 0 10px rgba(230, 230, 230, .5);
    -moz-box-shadow: 0 0 10px rgba(230, 230, 230, .5);
    box-shadow: 0 0 10px rgba(230, 230, 230, .5);
    background: #fff;
    border-radius: 10px;
}

.index_con .list {
    overflow: auto;
}

.index_con .list li {
    height: 52px;
}

.index_con .list li p {
    height: 52px;
    line-height: 52px;
}

.index_con .list li p:nth-child(1) {
    width: 590px;
    float: left;
    padding-left: 20px;
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.index_con .list li p:nth-child(2) {
    float: right;
    padding-right: 10px
}

.index_con .list li p button {
    height: 20px;
    width: 20px;
    border: none;
    margin: 11px 0 0 5px
}

.index_con .list li p button.edit {
    background: url(../../assets/img/edit2.png) no-repeat center center;
}

.index_con .list li p button.dele {
    background: url(../../assets/img/dele2.png) no-repeat center center;
}

.index_con .list li:hover p button.edit {
    background: url(../../assets/img/edit.png) no-repeat center center;
    border-radius: 3px;
    border: #cfcfcf 1px solid
}

.index_con .list li:hover p button.dele {
    background: url(../../assets/img/dele.png) no-repeat center center;
    border-radius: 3px;
    border: #cfcfcf 1px solid
}

.index_con .list li:nth-child(2n) {
    background: #f7f7f7
}

.index_con .list li:nth-child(2n+1) {
    background: #fff
}

.index_con .list li:last-child {
    border-radius: 0 0 10px 10px
}

.zxwd li {
    height: 52px;
    box-sizing: border-box;
    padding: 0 10px
}

.zxwd li>span {
    display: inline-block;
    height: 32px;
    text-align: center;
    line-height: 34px;
}

.zxwd li>span:nth-child(1) {
    width: 52px;
}

.zxwd li>span:nth-child(2) {
    width: 52px;
}

.zxwd li>span:nth-child(3) {
    width: 40px;
}

.zxwd li>span:nth-child(4) {
    width: 52px;
}

.zxwd li>span:nth-child(5) {
    width: 40px;
    background: url(../../assets/img/wenda2.png) no-repeat center bottom;
}

.zxwd li:nth-child(2n) {
    background: #f7f7f7
}

.zxwd li:nth-child(2n+1) {
    background: #fff
}

.zxwd li:last-child {
    border-radius: 0 0 10px 10px
}

.h2_index {
    padding: 0 10px 0 20px;
    border-bottom: 2px solid #fb6e52;
    height: 40px;
}

.h2_index h2 {
    height: 40px;
    color: #fb6e52;
    line-height: 40px;
    background: url(../../assets/img/wjz.png) no-repeat left center;
    padding-left: 30px;
    font-size: 16px;
}

.h2_index a {
    display: block;
    height: 40px;
    line-height: 40px;
    float: right;
    width: 40px;
    background: url(../../assets/img/refres2.png) no-repeat center center;
    text-indent: -999rem
}

.index_con .contain {
    overflow: auto;
    height: 198px;
    width: 100%
}

.index_con .block {
    border: #e5e9ec 1px solid;
    margin: 10px 10px 0;
}

.index_con .block .block_con1 {
    padding: 0 10px;
    height: 26px;
    line-height: 26px;
    background: #f9fafc;
    color: #888888
}

.index_con .block .block_con2 {
    padding: 10px;
    color: #444444;
}

.index_con .block .block_con2 >p {
    color: #fb6e52;
}

.index_con .block .block_con2 p {
    line-height: 25px;
}

.index_con .block .block_con2>div {
    padding-left: 30px;
}

.index_con .block .block_con2>div p span:nth-child(1) {
    padding-left: 30px;
    width: 200px;
    display: inline-block;
}

.index_con .block .block_con2 .zhibiao {
    display: inline-block;
    background: url(../../assets/img/up_arrow.png) no-repeat right center;
    padding-right: 10px;
    height: 25px;
}

.index_con .block .block_con2 .zhibiao2 {
    display: inline-block;
    background: url(../../assets/img/down_arrow.png) no-repeat right center;
    padding-right: 10px;
    height: 25px;
}

.index_con .block .block_con2>button {
    color: #fb6e52;
    border: 1px solid #fb6e52;
    border-radius: 15px;
    height: 30px;
    background: none;
    padding: 0 10px;
    line-height: 30px
}

.h2_index2 {
    padding: 0 10px 0 20px;
    background: #22a7f0;
    height: 40px;
    border-radius: 10px 10px 0 0
}

.h2_index2 h2 {
    height: 40px;
    color: #fff;
    line-height: 40px;
    background: url(../../assets/img/wenda.png) no-repeat left center;
    padding-left: 30px;
    font-size: 16px;
}

.h2_index2 a {
    display: block;
    height: 40px;
    line-height: 40px;
    float: right;
    width: 40px;
    background: url(../../assets/img/refres.png) no-repeat center center;
    text-indent: -999rem
}

.need_dealt {
    /*margin-top: 20px;*/
    height: 444px;
    -webkit-box-shadow: 0 0 10px rgba(230, 230, 230, .5);
    -moz-box-shadow: 0 0 10px rgba(230, 230, 230, .5);
    box-shadow: 0 0 10px rgba(230, 230, 230, .5);
    /*background: #fff;*/
    border-radius: 10px
}

.h2_index3 {
    padding: 0 10px 0 6px;
    height: 40px;
    margin-bottom: 16px;
}

.h2_index3 h2 {
    height: 40px;
    line-height: 40px;
    font-size: 24px;
}
.h2_index3 button{
    position: relative;
    top: 50%;
    margin-top: -16px;
  }

.h2_index3 a {
    display: block;
    height: 40px;
    line-height: 40px;
    float: right;
    width: 40px;
    background: url(../../assets/img/refres2.png) no-repeat center center;
    text-indent: -999rem
}

.need_dealt .list {
    height: 670px;
    padding: 10px;
    overflow-y: auto;
    background-color: #fff;
    border-radius: 10px;
}

.need_dealt .list li {
    height: 48px;
    border: #e6e7eb 1px solid;
    border-radius: 5px;
    border-left: 5px solid #1dc499;
    margin-top: 10px;
}

.need_dealt .list li.over {
    border-left: 5px solid #dfdfdf;
    background: #fafafb;
    color: #999;
}

.need_dealt .list li span {
    float: left;
    height: 48px;
    line-height: 48px;
}

.need_dealt .list li span:nth-child(1) {
    width: 60px;
    height: 30px;
    line-height: 30px;
    margin: 9px 10px;
    font-size: 14px;
}
/*公告列表类型--讲座--互动--其他*/
.need_dealt .list li span.chair{
    color: #fff;
    background-color: #0CC0DE;
    border-radius: 5px;
    text-align: center;
}
.need_dealt .list li span.interaction{
    color: #fff;
    background-color: #23C081;
    border-radius: 5px;
    text-align: center;
}
.need_dealt .list li span.other{
    color: #FEA731;
    border: 1px solid #FEA731;
    border-radius: 5px;
    text-align: center;
}
.need_dealt .list li span.new{
     background: url(../../assets/img/new.png) no-repeat left center;
     padding-left: 40px
}

.need_dealt .list li span:nth-child(2) {
    width: 500px;
    color: #1DC496;
    margin-left: 86px;
    cursor: pointer;
}

.need_dealt .list li span:nth-child(3) {
    width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.need_dealt .list li span:nth-child(4) {
    width: 130px;
    padding-left: 40px;
    float: right;
    background: url(../../assets/img/time.png) no-repeat 10px center;
}

.need_dealt .list li.over p:nth-child(4) {
    width: 130px;
    padding-left: 40px;
    float: right;
    background: url(../../assets/img/timeover.png) no-repeat 10px center;
}

.need_dealt .list li p button {
    height: 30px;
    width: 80px;
    border: none;
    margin: 11px 0 0 5px;
    background: none;
    padding: 0 10px;
    line-height: 30px;
    border-radius: 15px;
}

.need_dealt .list li p button.agree {
    color: #1dc499;
    border: 1px solid #1dc499;
}

.need_dealt .list li p button.disagree {
    color: #ffae00;
    border: 1px solid #ffae00;
}

.threestep_con h2 {
    margin: 20px auto;
    background: url(../../assets/img/c_ok.png) no-repeat 115px center;
    padding-left: 60px;
    color: #19ab85;
    text-align: center;
    height: 60px;
    line-height: 60px;
    font-size: 20px
}

/*公告内容*/
#add-notice-cover .modal-dialog{
  /*  width: 70%;*/
}
.list-tips .default-span{
    font-size: 22px;
    color: #009A67;
}
    /*新增*/
.form-group.notice-title{
    margin-bottom: 15px;
}
    /*查看*/
.form-group.notice-watch{
    border-bottom: 1px solid #ccc;
    margin-bottom: 10px;
}
.form-group.notice-watch h2{
    font-size: 22px;
    text-align: center;
}
.form-group.notice-watch span.time-person{
    padding: 10px 30px;
    display: inline-block;
}

#notice-container{
    width: 100%;
    height: 300px;
   /* overflow: auto;*/
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 10px;
}

/*提示信息*/
#publish-cover .modal-content{
    width: 56%;
    height: 80px;
    line-height: 80px;
    text-align: center;
    font-size: 18px;
    color: #f00;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
}
.error{
    display: block;
    padding-top: 10px;
    color: #f00;
}

</style>

<template>
    <div class="index clearafter">
        <module-head keep-alive></module-head>
        <div class="content flex">
            <div class="w220">
                <menu-list keep-alive></menu-list>
            </div>
            <div class="w980 flex_full">
                <div class="need_dealt cb">
                    <div class="flex flex_between">
                      <p class="flex flex_vcenter pdb20">
                        <i class="titleTag"></i>
                        <span class="fRedBig">公告发布</span>
                      </p>
                        <button class="longBtn" @click="newAddNotice">新增公告</button>
                    </div>
                    <ul class="list">
                        <li v-for="($index,item) in forumList" :class="{over:item.dealFlag==1}" track-by="$index">
                            <span :class="[{'chair':item.noticeType == '01'},{'interaction':item.noticeType == '02'},{'other':item.noticeType == '99'}]">{{item.noticeTypeText}}</span>
                            <span @click="watchNotice(item)" :class="{new:item.newFlag=='1'}">{{item.noticeTitle}}</span>

                            <span title="{{item.operateUserName}}">发布人:{{item.operateUserName}}</span>
                            <span>{{item.operateTime.substr(0,11)}}</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 新增-查看公告 -->
        <div id="add-notice-cover" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
              <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                    <div class="list-tips">
                        <span class="default-span" v-text="coverTitle"></span>
                    </div>
                  </div>
                  <div class="modal-body cbafter">
                      <div class="form-group notice-title" v-show="publishFlag">
                          <label for="exampleInputName2">公告标题: </label>
                          <input name="privateKey" type="text" class="form-control" placeholder="标题字数限15字内" maxlength="15" v-model="newAddNoticeData.noticeTitle" />
                          <span class="error" v-show="titleContentFlag">标题/内容不能为空！</span>
                      </div>
                      <div class="form-group notice-watch" v-show="watchFlag">
                          <h2 v-text="watchNoticeData.noticeTitle"></h2>
                          <span class="time-person">发布时间: {{watchNoticeData.operateTime}}</span>
                          <span class="time-person">发布人: {{watchNoticeData.operateUserName}}</span>
                      </div>
                      <div class="form-group">
                          <label for="exampleInputName2" class="vertical-top" v-show="publishFlag">公告内容: </label>
                          <div id="notice-container">
                              <div id="notice-content"></div>
                          </div>
                      </div>
                  </div>
                  <div class="modal-footer" v-show="publishFlag">
                    <div class="form-group">
                        <button type="submit" class="btn btn-default save-btn" @click="publishNotice">发 布</button>
                    </div>
                  </div>
                </div><!-- /.modal-content -->
              </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
        <!-- 发布提示 -->
        <div class="modal fade" id="publish-cover" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content" v-text="publishResult"></div>
            </div>
        </div>
    </div>
</template>
<script>
    var imgdoc1 = require("assets/img/imgdoc1.jpg");
    var jiantou = require("assets/img/jiantou.png");
    var headimg = require("assets/img/cs2.jpg");

    import 'assets/lib/bootstrap-3.3.2/css/bootstrap.min.css'
    import 'assets/lib/bootstrap-3.3.2/js/bootstrap.min.js'

    import 'assets/reset.css'
    import Public from 'assets/public.js'
    import moduleHead from 'components/module-head'
    import menuList from 'components/menu-list'

    // 富文本
    import 'assets/lib/bootstrap-summernote/summernote.css'
     require('summernote')
    // import 'assets/lib/bootstrap-summernote/summernote-zh-CN.js';

    export default {
    data() {
            return {
                headimg: headimg,
                roleId: "",
                roster_lists: [],

                //公告列表数据
                forumList: [],

                //发布与查看标识
                publishFlag: true,
                watchFlag: false,

                //操作标题
                coverTitle: '新增公告',

                //新增公告数据
                newAddNoticeData: {
                    noticeTitle: '',
                    noticeContent: '',
                    noticeType: '99'
                },

                //查看公告数据
                watchNoticeData: {},

                //信息验证
                titleContentFlag: false,

                //信息发布结果
                publishResult: '发布成功'
            }
        },
        components: {
            moduleHead, menuList
        },
        ready() {
            //获取代办事项列表
            this.getNoticeList();
            //初始化summernote
            this.summernotePlugin();
        },
        methods: {
            //获取公告列表
            getNoticeList() {
                var that = this;
                $.when(Public.commonajax("base.noticeinfoService", "queryAllNoticeinfo", "[]"))
                    .done(function(res) {
                        if (res.code == 200) {
                            $.each(res.body,function(index, el) {
                                if(el.noticeType=="01"){
                                    el.noticeTypeText="讲座"
                                }else if(el.noticeType=="02")
                                {
                                   el.noticeTypeText="互动"
                                }else{
                                     el.noticeTypeText="其它"
                               }
                            });
                            that.forumList = res.body;
                        }
                    });
            },

            //初始化summernote
            summernotePlugin () {
                $('#notice-content').summernote({
                    height: 300,
                    placeholder: '请您输入发布的内容',
                    lang: 'zh-CN'
                });
                $('#notice-content').summernote('code','')
            },

            //新增公告
            newAddNotice () {
                $('#add-notice-cover').modal('show');
                this.clearNoticeMsg();
                this.coverTitle = '新增公告';
            },

            //发布公告
            publishNotice () {
                var that = this;
                this.newAddNoticeData.noticeContent = $('#notice-content').summernote('code');
                //验证
                if(this.newAddNoticeData.noticeTitle != '' && this.newAddNoticeData.noticeContent != ''){
                    this.titleContentFlag = false;
                       $.when(Public.commonajax('base.noticeinfoService','save','['+JSON.stringify(this.newAddNoticeData)+']')).done(function(res){
                            if(res.code == 200){
                                $('#add-notice-cover').modal('hide');
                                $('#publish-cover').modal('show');
                                that.publishResult = '发布成功！';
                                setTimeout(()=>$('#publish-cover').modal('hide'),1800);
                                that.getNoticeList();
                            };
                        });
                }else{
                     this.titleContentFlag = true;
                     setTimeout(()=>that.titleContentFlag = false,2000);
                };
            },

            //查看公告
            watchNotice (item) {console.log(item)
                this.publishFlag = false;
                this.watchFlag = true;
                this.watchNoticeData = item;
                this.watchNoticeData.operateTime = item.operateTime.substr(0,11);
                $('#notice-content').summernote('code',this.watchNoticeData.noticeContent);
                this.coverTitle = '查看公告';
                $('#add-notice-cover').modal('show');
            },

            //清空公告信息
            clearNoticeMsg () {
                this.newAddNoticeData.noticeTitle = '';
                $('#notice-content').summernote('code','');
                this.publishFlag = true;
                this.watchFlag = false;
            },

            // 获取当前时间和返回时间的差
            getlatesttime(occurTime) {
                var date1 = new Date();
                var date2 = new Date(occurTime);
                var s1 = date1.getTime(),
                    s2 = date2.getTime();
                var total = (s1 - s2) / 1000;
                var day = parseInt(total / (24 * 60 * 60)); //计算整数天数
                var afterDay = total - day * 24 * 60 * 60; //取得算出天数后剩余的秒数
                var hour = parseInt(afterDay / (60 * 60)); //计算整数小时数
                var afterHour = total - day * 24 * 60 * 60 - hour * 60 * 60; //取得算出小时数后剩余的秒数
                var min = parseInt(afterHour / 60); //计算整数分
                var afterMin = total - day * 24 * 60 * 60 - hour * 60 * 60 - min * 60; //取得算出分后剩余的秒数
                if (day > 0) {
                    return day + "天前"
                }
                if (hour > 0) {
                    return hour + "小时前"
                }
                if (min > 0) {
                    return min + "分钟前"
                }
                if (afterMin > 0) {
                    return afterMin + "秒前"
                }
            },
            //返回字符串长度区分中英文中文2个 英文1个
            strlen(str) {
                var len = 0;
                for (var i = 0; i < str.length; i++) {
                    var c = str.charCodeAt(i);
                    //单字节加1
                    if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {
                        len++;
                    } else {
                        len += 2;
                    }
                }
                return len;
            },

        },
        events: {},
        watch: {
            "allnotice": function(val, oldval) {
                if (val) {
                    $.each(this.dangerNoticelist, function(index, el) {
                        el.noticeStauts = "1"
                    });
                } else {
                    $.each(this.dangerNoticelist, function(index, el) {
                        el.noticeStauts = "0"
                    });
                }
            }
        }

}
</script>

